<!--
  @file popup.html
  @author YnnSon
  @description 扩展弹出窗口的HTML结构
  @created 2025-08-07
-->
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>存储管理器</title>
  <style>
    :root {
      --primary: #4361ee;
      --primary-dark: #3a56d4;
      --secondary: #4895ef;
      --success: #4cc9f0;
      --danger: #f72585;
      --text: #2d3748;
      --text-light: #718096;
      --text-lighter: #a0aec0;
      --bg: #f8fafc;
      --card-bg: #ffffff;
      --border: #e2e8f0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      padding: 16px;
      min-width: 420px;
      max-height: 600px;
    }

    .container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 4px;
    }

    .logo {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .logo img {
      width: 100%;
      height: 100%;
    }

    .title-group h1 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .title-group p {
      font-size: 13px;
      color: var(--text-light);
    }

    /* 标签页样式 */
    .tabs-container {
      display: flex;
      gap: 6px;
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 6px;
      box-shadow: inset 0 0 0 1px var(--border);
    }

    .tab {
      flex: 1;
      text-align: center;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab.active {
      background-color: var(--primary);
      color: white;
    }

    /* 卡片样式 */
    .card {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      gap: 12px;
    }

    .card-title h2 {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-title h2:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--primary);
    }

    .url-display {
      background: rgba(67, 97, 238, 0.08);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--text);
      font-family: monospace;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px
    }

    .domain-url {
      word-break: break-word;
    }

    .domain-icon {
      color: var(--text-light);
    }

    /* 数据区域 */
    .data-container {
      margin-top: 16px;
      min-height: 180px;
      max-height: 250px;
      overflow: auto;
      position: relative;
      background-color: rgba(242, 245, 255, 0.4);
      border-radius: 8px;
      padding: 8px;
    }

    textarea {
      width: 100%;
      min-height: 180px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      resize: none;
      font-family: 'Consolas', monospace;
      font-size: 13px;
      background-color: transparent;
      color: var(--text);
    }

    textarea:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* 操作按钮 */
    .button-group {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }

    button {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
    }

    button.primary {
      background: var(--primary);
      color: white;
    }

    button.primary:hover {
      background: var(--primary-dark);
    }

    button.ghost {
      background: transparent;
      color: var(--primary);
      box-shadow: inset 0 0 0 1px var(--border);
    }

    button.ghost:hover {
      box-shadow: inset 0 0 0 1px var(--primary);
    }

    button.danger {
      background: var(--danger);
      color: white;
    }

    button.danger:hover {
      opacity: 0.9;
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 40px 0;
      text-align: center;
    }

    .empty-state img {
      width: 64px;
      opacity: 0.3;
    }

    .empty-state p {
      color: var(--text-light);
      max-width: 280px;
      font-size: 14px;
      line-height: 1.5;
    }

    /* 通知 */
    .notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
      padding: 12px 24px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      opacity: 0;
      transition: all 0.3s;
      z-index: 100;
      pointer-events: none;
      font-size: 14px;
    }

    .notification.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .tooltip {
      position: relative;
      cursor: help;
    }

    .tooltip-text {
      visibility: hidden;
      width: 200px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -100px;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 12px;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

    /* 加载器 */
    .loader {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      z-index: 10;
      border-radius: 8px;
    }

    .spinner {
      width: 32px;
      height: 32px;
      border: 4px solid rgba(67, 97, 238, 0.1);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* 页脚 */
    .footer {
      font-size: 12px;
      color: var(--text-lighter);
      text-align: center;
      margin-top: 8px;
      padding: 8px 0;
      border-top: 1px dashed var(--border);
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <div class="logo">
        <img src="images/48.png" alt="">
      </div>
      <div class="title-group">
        <h1>存储管理器</h1>
        <p>跨页面同步localStorage, sessionStorage和cookies</p>
      </div>
    </header>

    <div class="card">
      <div class="url-display">
        <div class="domain-url" id="current-url">等待检测当前页面...</div>
        <div class="domain-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="2" y1="12" x2="22" y2="12"></line>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="tabs-container">
      <div class="tab active" data-type="localStorage">LocalStorage</div>
      <div class="tab" data-type="sessionStorage">SessionStorage</div>
      <div class="tab" data-type="cookies">Cookies</div>
    </div>

    <div class="card">
      <div class="card-title">
        <h2 id="read-storage-title">LocalStorage</h2>
        <button class="ghost" id="read-clear-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
          </svg>
          清除
        </button>
      </div>

      <div class="data-container">
        <div class="loader" id="loader">
          <div class="spinner"></div>
          <div>正在读取存储数据...</div>
        </div>
        <textarea id="json-output" placeholder="点击读取按钮获取数据..." spellcheck="false"></textarea>
      </div>

      <div class="button-group">
        <button class="primary" id="read-btn" title="点击读取当前数据">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21.2 15c.7-1.2 1-2.5.7-3.9-.6-4-4.8-4.9-7.1-2.3-2.3-2.6-6.5-1.7-7.1 2.3-.3 1.4 0 2.7.7 3.9">
            </path>
            <path
              d="M14.9 12.6c2.2 2 5.5 2.8 8.1 1.2 1.3-.8 1.9-1.8 1.9-3.2M3.9 14.1C2.3 11.5 3.1 8.2 5.1 6c.6-.5 1.2-.9 1.9-1.1">
            </path>
            <path d="M8 22c1.8.5 3.7.1 5.4-1.1 1.1-.9 2.1-2.1 3.1-3.3"></path>
            <path d="M13 21.7c1.2-1.7 1.7-3.7 1.3-5.9"></path>
          </svg>
          读取
        </button>
        <button class="ghost" id="copy-btn" title="点击复制当前数据">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
          复制
        </button>
        <button class="primary" id="copy-to-memory-btn" title="将当前数据保存到内存，可在其他页面粘贴">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14"></path>
            <path d="M15 7l4 4-4 4"></path>
            <path d="M5 17a2 2 0 0 0-2-2H3"></path>
            <path d="M5 7a2 2 0 0 1-2-2H3"></path>
          </svg>
          同步
        </button>
      </div>
    </div>

    <div class="card">
      <div class="card-title">
        <h2>写入到当前页面的<text id="write-storage-title">LocalStorage</text></h2>
        <button class="ghost" id="write-clear-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
          </svg>
          清除
        </button>
      </div>

      <textarea id="paste-input" placeholder="粘贴数据并写入..."></textarea>

      <div class="button-group">
        <button class="primary" id="paste-from-clipboard-btn" title="点击从剪贴板粘贴数据到输入框">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
          </svg>
          从剪贴板<br />粘贴
        </button>
        <button class="ghost" id="paste-from-memory-btn" title="点击从内存中粘贴数据到输入框">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12H3l3.5-4 3.5 4H8v7H6v-7z"></path>
            <path d="M19 12h2l-3.5-4-3.5 4h2v7h2v-7z"></path>
          </svg>
          从内存<br />粘贴
        </button>
        <button class="primary" id="write-btn" title="点击将输入框内的数据写入到当前页面">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 19h6"></path>
            <path d="M19 4H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2"></path>
            <path d="m3 7 5 3 5-6 5 6 5-3"></path>
          </svg>
          写入
        </button>
      </div>
    </div>

    <div class="footer">
      <p>跨页面存储同步工具</p>
    </div>
  </div>

  <div class="notification" id="notification">操作成功！</div>

  <script src="popup.js"></script>
</body>

</html>